// property: 修改对象属性，不会体现在html结构中   尽量用property操作
// attribute 修改html属性，会改变html结构
// 两者都会引起dom渲染

const div1 = document.getElementById('div1')
console.log('div1',div1);
// div1.style.backgroundColor = 'red'
// property

// const divList = document.getElementsByTagName('div')
// const containerDiv = divList[0]
// console.log(containerDiv);
// const p1 = containerDiv.getElementsByTagName('p')[0]
// console.log(p1);
// p1.style.backgroundColor= 'red'
// p1.style.width= '200px'

const pList = document.querySelectorAll('p')
const p2 = pList[2]
p2.setAttribute('data-name','iLoveU')
console.log(p2.getAttribute('data-name'));